<?php
header('Content-type: text/html; charset=utf-8');
$p = $_GET["p"];
$pagemax=16;//頁數
$prefix='JEN';//檔案接頭
if($p<=0||$p>$pagemax||preg_match("/[^0-9]/",$p)){$p=1;}
$phpself='index.php';

$tmp="log.log";
$cp = fopen($tmp, "a+");// 讀寫模式, 指標於最後, 找不到會嘗試建立檔案
if($cp){
	rewind($cp); //從頭讀取
	$buf=fread($cp,1000000);
	$file_rw=1;
}else{
	$buf='';
	$file_rw=0;
}
fclose($cp);
$cellarr=array();
$cellarr=explode("\n",$buf);
$countline = count($cellarr);
$data='';
for($i = 0; $i < $countline; $i++){
	$cellarr[$i]=explode(",",$cellarr[$i]);
	if($cellarr[$i][0] == $p){
		$data=$data."<div>".'頁'.$cellarr[$i][0].'號'.$cellarr[$i][1].'x='.$cellarr[$i][2].'y='.$cellarr[$i][3].'w='.$cellarr[$i][4].'h='.$cellarr[$i][5].'</div>';
		$data=$data."<div style='padding:0px 0px 0px 10px;'>".$cellarr[$i][7]."</div>";
		$data=$data."<div class='b' id='b".$cellarr[$i][1]."' style='z-index:2;left:".$cellarr[$i][2]."px;top:".$cellarr[$i][3]."px;width:".$cellarr[$i][4]."px;height:".$cellarr[$i][5]."px;'>-</div>";
		$data=$data."<div id='b".$cellarr[$i][1]."text' style='z-index:2;display:none;position:absolute;border:1px solid #000000;background-color:#fff;'><table width='100' style='word-break:break-all'><tr><td>".$cellarr[$i][7]."</td></tr></table></div>";
		$data=$data."<script>loadchk=0;
		$(window).load(function(){ //load
			$('#b".$cellarr[$i][1]."').mouseenter(function(event){
				$('#b".$cellarr[$i][1]."text').css('display','inline');
				$('#b".$cellarr[$i][1]."text').css('left',$('#b".$cellarr[$i][1]."').position().left);
				$('#b".$cellarr[$i][1]."text').css('top',$('#b".$cellarr[$i][1]."').position().top+$('#b".$cellarr[$i][1]."').height());
			});
			$('#b".$cellarr[$i][1]."').mouseleave(function(event){
				$('#b".$cellarr[$i][1]."text').css('display','none');
			});
			$('#b".$cellarr[$i][1]."').click(function(event){
				$('#x').attr('value', $('#b".$cellarr[$i][1]."').position().left);
				$('#y').attr('value', $('#b".$cellarr[$i][1]."').position().top);
				$('#w').attr('value', $('#b".$cellarr[$i][1]."').width());
				$('#h').attr('value', $('#b".$cellarr[$i][1]."').height());
				$('#page').attr('value', '".$p."');
				$('#boxiff').attr('value', ".$cellarr[$i][1].");
				$('#text').attr('value', '".$cellarr[$i][7]."');
				$('#meow').attr('value', 'edit');
			});
		});//*load
		</script>";
		$tmp='<script>
		</script>';
		$data=$data.$tmp;
	}
}
$keyword='英雄聯盟 下路 閃耀劍 伊澤瑞爾 珍娜 輔助 蒙多 GANK 四格漫畫';
$htmlstart=<<<EOT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="description" content="$keyword">
<meta http-equiv="keywords" content="$keyword">
<title>$keyword</title>
<STYLE TYPE="text/css">
body { font-family:'細明體'; }
#mouse_xy{
	box-sizing:content-box;
	position:absolute;
	border:1px solid #000000;
	z-index:10;
	left:0px;
	top:300px;
	width:100px;
	height:50px;
	background-color:rgb(255,255,128); 
	display:none;
}
.a {
	box-sizing:content-box;
	position:absolute;
	border:1px solid #000000;
	display:none;
}
.b {
	box-sizing:content-box;
	position:absolute;
	border:1px solid #000000;
	display:inline;
}
#box_what{
	z-index:3;
	left:0px;
	top:300px;
	width:200px;
	height:40px;
	background-color:rgb(255,255,128); 
	cursor:move;
}
#box_text{
	z-index:4;
	left:0px;
	top:300px;
	width:120px;
	height:60px;
	cursor:text;
	background-color:#fff; 
}
#box_corner{
	z-index:5;
	left:0px;
	top:300px;
	width:10px;
	height:10px;
	background-color:#000; 
	cursor:se-resize;
}
#img_div {
	box-sizing:content-box;
	padding:10px;
	border-width:10px;
	border-color:#eeaa88;
	border-style:solid;
	background-color:#F0E0D6; 
}

</STYLE>

</head>
<body>
\n
EOT;

$htmlend=<<<EOT
\n\n
<a href='./'>./</a> $ver
</body></html>
EOT;

$js=<<<EOT
<script>
//xxb00
if(!jQuery.browser.msie){
addpix=10;//向滑鼠的右下偏移
box_follow=1;
box_show=1;
box_show_click=0;
$(window).load(function(){//使用load 不然chrome讀不到
	$("#p2").html("文字");
	$("#box_text").html("　點圖片<br/>開始註釋");
	//a群的box位置初始化
	$(".a").css('left',$("#main_img").position().left);
	$(".a").css('top',$("#main_img").position().top);
	$("#box_what").css("opacity","0.5"); //透明度
	//限制box的顯示範圍
	$("#main_img").mouseenter(function(event){box_show=1;});//移到圖上顯示
	$("#main_img").mouseleave(function(event){box_show=0;});
	$(".a").mouseenter(function(event){box_show=1;});//移到box上也顯示
	$(".a").mouseleave(function(event){box_show=0;});
	$(window).mousemove(function(event){//偵測滑鼠滑動
		if(box_show){//哪些box要顯示
			$(".a").css('display','inline');
			$("#mouse_xy").css('display','inline');
		}else{
			$(".a").css('display','none');
			$("#mouse_xy").css('display','none');
		}
		//取得滑鼠位置
		mxx=event.pageX;
		myy=event.pageY;
		//mouse_xy跟隨滑鼠
		//addpix=10;//向滑鼠的右下偏移
		$("#mouse_xy").html(mxx+","+myy);
		$("#mouse_xy").css('left',mxx+addpix);
		$("#mouse_xy").css('top',myy+addpix);
		//*mouse_xy跟隨滑鼠
		
			if(box_free){
				//#box_what
				$("#box_what").css("left",mxx - xx_diff);
				$("#box_what").css("top",myy - yy_diff);
				//$("#box_text").html(xx_diff+'.'+yy_diff);
				//#box_corner
				tmpx=$("#box_what").position().left+$("#box_what").width()-$("#box_corner").width();
				$("#box_corner").css('left',tmpx);
				tmpy=$("#box_what").position().top+$("#box_what").height()-$("#box_corner").height();
				$("#box_corner").css('top',tmpy);
				//#box_text
				$("#box_text").css('left',$("#box_what").position().left);
				$("#box_text").css('top',$("#box_what").position().top+$("#box_what").height());
			}else{}
		
			if(box_whfree){
				//取得滑鼠位置
				mxx=event.pageX;
				myy=event.pageY;
				//偏移量
				bww_new=mxx-bxx;//<==取得滑鼠與箱子的相對位置(活動式)
				bhh_new=myy-byy;
				if(bww_new<15){bww_new=15;} //長寬變形不小於15
				if(bhh_new<15){bhh_new=15;}
				//新的box_what長寬
				$("#box_what").css("width",bww_new);
				$("#box_what").css("height",bhh_new);
				//新的box_corner位置
				tmpx=bxx+$("#box_what").width()-$("#box_corner").width();
				$("#box_corner").css('left',tmpx);
				tmpy=byy+$("#box_what").height()-$("#box_corner").height();
				$("#box_corner").css('top',tmpy);
				//#box_text
				$("#box_text").css('left',$("#box_what").position().left);
				$("#box_text").css('top',$("#box_what").position().top+$("#box_what").height());
			}else{}
		
		$("#box_what").html("位置"+$("#box_what").position().left+'.'+$("#box_what").position().top);
		$("#box_what").append('<br/>'+'長寬'+$("#box_what").width()+'.'+$("#box_what").height());
	});//*滑鼠滑動
////////
	//var link = document.getElementById("main_img"); //existing code
	$('#main_img').click(function xxa01a(event){//滑鼠點擊圖片
		if(box_show){box_show=1;}else{box_show=1;}
		//alert("position");
		$('#p2').html("點擊");
		$("#box_text").html("點黃色方塊<br/>可以移動它<br/>*右下=改變長寬");//點擊圖片
		//初始化box
		box_free=0;
		box_whfree=0;
		$("#box_what").height(100);
		$("#box_what").width(100);
		//取得滑鼠位置
		mxx=event.pageX;
		myy=event.pageY;
		//固定box_what箱子
		$("#box_what").css('left',mxx+addpix);
		$("#box_what").css('top',myy+addpix);
		$("#box_what").css('display','inline');//顯示box_what
		//固定box_text
		$("#box_text").css('left',mxx+addpix);
		$("#box_text").css('top',myy+addpix+$("#box_what").height());
		$("#box_text").css('display','inline');//顯示box_text
		//box_corner位置
		tmpx=mxx+addpix+$("#box_what").width()-$("#box_corner").width();
		$("#box_corner").css('left',tmpx);
		tmpy=myy+addpix+$("#box_what").height()-$("#box_corner").height();
		$("#box_corner").css('top',tmpy);
		$("#box_corner").css('display','inline');//顯示box_corner
	});
////////box_free
	box_free=0;
	$("#box_what").click(function (event){
		if(box_free){box_free=0;}else{box_free=1;}
		$("#box_text").html("點這裡套用資料<br/>到下方");//點擊box_what
		//取得滑鼠位置
		mxx=event.pageX;
		myy=event.pageY;
		//取得box位置
		bxx=$("#box_what").position().left;
		byy=$("#box_what").position().top;
		//偏移量
		xx_diff=mxx-bxx;//<==取得滑鼠與箱子的相對位置
		yy_diff=myy-byy;
		$(window).mousemove(function(event){});
	});
////////*box_free
////////box_whfree
	box_whfree=0;
	$("#box_corner").click(function (event){
		if(box_whfree){box_whfree=0;}else{box_whfree=1;}
		$("#box_text").html("改變長寬");//點擊box_corner
		//取得box位置
		bxx=$("#box_what").position().left;
		byy=$("#box_what").position().top;
		//$('#box_text').html(xx_diff+"."+yy_diff);
		$(window).mousemove(function(event){});
	});
////////*box_whfree
});//*load
function xx(tmp){tmp=tmp+"*";return tmp;};
}else{
$("#p2").html("IE不支援此功能 sorry");
}
</script>

<script>
$("#chk").attr("checked", true); //id=chk
$("#box_text").click(function(event){
	$("#box_text").html("接下來到下方<br/>登錄註釋]");
	$("#x").attr("value", $("#box_what").position().left);
	$("#y").attr("value", $("#box_what").position().top);
	$("#w").attr("value", $("#box_what").width());
	$("#h").attr("value", $("#box_what").height());
	$("#page").attr("value", $p);
	$("#boxiff").attr("value", '0');
	$("#text").attr("value", '文字');
	$("#meow").attr("value", 'new');
});
</script>

EOT;


$body='';
$page_echo='';
for($i=1; $i<=$pagemax; $i++){
	if($i<10){$tmp="0".$i;}else{$tmp="".$i;}
	if($p==$i){
		$page_echo=$page_echo."<span style='border:1px solid red;background-color:#0ff;'>[<a href=".$phpself."?p=".$i.">";
		$page_echo=$page_echo."$tmp</a>]</span>";
	}else{
		$page_echo=$page_echo."[<a href=".$phpself."?p=".$i.">";
		$page_echo=$page_echo."$tmp</a>]";
	}
}
if($p<10){$tmp="0".$p;}else{$tmp="".$p;}
$body.=$page_echo.'<br/>'."\n";
if($file_rw){$file_rw='';}else{$file_rw='[錯誤]無法使用紀錄檔功能';}
$body.='
<div id="mouse_xy"></div>
	<div class="a" id="box_what"></div>
	<div class="a" id="box_corner"></div>
	<div class="a" id="box_text"></div>

<div id="img_div"><img id="main_img" src="'.$prefix.$tmp.'.jpg"/></div>
<p id=p2>不支援javascript或是讀取中</p>
'.$file_rw."\n";

$form='
<form action="fopen.php" method="post">
<input type=hidden id="page" name="page" value="">
<input type=hidden id="boxiff" name="boxiff" value="">
X:<input type="text" id="x" name="x" value="" size="10"/>
Y:<input type="text" id="y" name="y" value="" size="10"/>
W:<input type="text" id="w" name="w" value="" size="10"/>
H:<input type="text" id="h" name="h" value="" size="10"/>
<br/>
譯:<input type="text" id="text" name="text" value="" size="20"/><br/>
新:<input type="text" id="meow" name="meow" value="" size="10"/>
<label><input type=checkbox name=chk id=chk value=on>確認</label>
<br/><input type="submit" value="送出"/><br/>
</form>
';
$body.=$form;
$body.=$data;
$body.=$page_echo.'<br/>'."\n";
$body.=$js;
echo $htmlstart;
echo $body;
echo $htmlend;
?>
